<template>
  <div>
    <v-header></v-header>
    <div class="line"></div>
    <!--导航栏-->
    <v-menu></v-menu>
    <div class="musicCommentBody">
      <!--歌曲信息显示区域-->
      <el-card class="musicInfo">
        <el-row>
          <el-col :span="12" class="musicInfo_music">
            <el-card shadow="hover" class="commonCss">
              <div slot="header">
                <span style="font-size: 16px;font-weight: bold">歌曲信息</span>
              </div>
              <div style="display: inline-block;">
                <el-link :underline="false" @click="toSingerAlbumDetail">
                  <el-image :src="musicInfo.img"
                            style="width: 200px;height: 200px;border-radius: 10px"></el-image>
                </el-link>

              </div>
              <div class="musicTextDiv">
                <p class="musicInfoText" :title="musicInfo.songName">歌曲名:{{musicInfo.songName}}</p>
                <p class="musicInfoText" :title="musicInfo.albumName">专辑名:{{musicInfo.albumName}}</p>
                <p class="musicInfoText">播放时长:{{musicInfo.timeLength}}</p>
                <p class="musicInfoText">播放热度:{{musicInfo.playCount}}</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12" class="musicInfo_singer">
            <el-card shadow="hover" class="commonCss">
              <div slot="header">
                <span style="font-size: 16px;font-weight: bold">歌手信息</span>
              </div>
              <div style="display: inline-block;">
                <el-link :underline="false" @click="toSingerDetail">
                  <el-image :src="singerInfo.imgUrl"
                            style="width: 200px;height: 200px;border-radius: 10px"></el-image>
                </el-link>
              </div>
              <div class="musicTextDiv">
                <p class="musicInfoText" :title="singerInfo.singerName">歌手名:{{singerInfo.singerName}}</p>
                <p class="musicInfoText">粉丝:{{singerInfo.fansCount}}</p>
                <p class="musicInfoText">歌手热度:{{singerInfo.heat}}</p>
                <div class="musicInfoText" :title="singerInfo.intro">歌手简介:{{singerInfo.intro}}</div>
                <el-popover
                  placement="top-start"
                  :title="singerInfo.singerName"
                  :width="400"
                  trigger="hover"
                  :content="singerInfo.intro"
                >
                  <template #reference>
                    <el-button size="mini" style="margin-top: 5px">查看详情</el-button>
                  </template>
                </el-popover>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="commentInfo">
        <div slot="header">
          <span style="font-size: 16px;font-weight: bold">评论</span>
          <span style="font-size: 12px;margin-left: 10px">共{{commentNum}}条评论</span>
        </div>
        <!--评论主体-->
        <div v-for="(item,index) in commentListV1" style="margin-bottom: 30px" v-show="commentListV1 !== null">
          <!--头像-->
          <div
            style="display: inline-block;width: 40px;height: 40px;position: absolute;margin-top: 0">
            <el-link :underline="false" @click="toUserDetail(item.userId)">
              <el-image :src="item.userHeaderImg" style="width: 40px;height: 40px;border-radius: 10px"></el-image>
            </el-link>

          </div>
          <div style="display: inline-block;margin-left:50px;width: 900px;height: 20px;">
            <!--用户名称和评论时间-->
            <div style="height: 40px">
              <div>{{item.userName}}</div>
              <span style="font-size: 10px;color: #969696">{{item.createTime}}</span>
              <el-popconfirm title="确定删除这条评论吗？" @confirm="deleteComment(item)">
                <template #reference>
                  <el-link icon="iconfont icon-shanchu" :underline="false" style="float: right"
                           v-show="userInfo.userId===item.userId"></el-link>
                </template>
              </el-popconfirm>
            </div>
            <!--评论内容-->
            <div style="width: 900px;margin-top: 20px">
              {{item.content}}
            </div>
            <div style="margin-top: 10px">
              <el-link :underline="false" icon="iconfont icon-xin" v-if="item.isUserLike === 0"
                       @click="updateCommentStatus(item)">&nbsp;{{item.likeNum}}
              </el-link>
              <el-link :underline="false" icon="iconfont icon-xin2" v-else @click="updateCommentStatus(item)">&nbsp;{{item.likeNum}}</el-link>
              <el-link :underline="false" icon="iconfont icon-xiaoxi" style="margin-left: 30px"
                       @click="showCommit(1,index)">&nbsp;
              </el-link>
            </div>
            <!--评论控件-->
            <div style="margin-top: 20px;" :style="{'display':item.isShowComment}">
              <el-input
                v-model="item.inputText"
                maxlength="150"
                placeholder="请写下你精彩的评论吧"
                show-word-limit
                type="textarea"
              />
              <div style="margin-top: 10px;text-align: right">
                <el-button round size="mini" style="width: 80px" @click="removeComment(1,index)">取消</el-button>
                <el-button type="primary" round size="mini" style="width: 80px" @click="commitCommentLevel1(item)">发布
                </el-button>
              </div>
            </div>
            <el-divider></el-divider>
            <!--二级评论-->
            <div v-for="(item1,index1) in item.userCommentList" v-show="item.userCommentList !== null">
              <!--头像-->
              <div style="display: inline-block;">
                <div
                  style="width: 40px;height: 40px;display: inline-block;position: absolute;margin-top: 0">
                  <el-link :underline="false" @click="toUserDetail(item1.userId)">
                    <el-image :src="item1.userHeaderImg"
                              style="width: 40px;height: 40px;border-radius: 10px"></el-image>
                  </el-link>
                </div>
                <!--用户名称和评论时间-->
                <div style="height: 40px;margin-left: 50px">
                  <div>{{item1.userName}}</div>
                  <span style="font-size: 10px;color: #969696">{{item1.createTime}}</span>
                  <el-popconfirm title="确定删除这条评论吗？" @confirm="deleteComment(item1)">
                    <template #reference>
                      <el-link icon="iconfont icon-shanchu" :underline="false" style="float: right"
                               v-show="userInfo.userId===item1.userId"></el-link>
                    </template>
                  </el-popconfirm>
                </div>
                <!--评论内容-->
                <div style="width: 900px;margin-top: 20px">
                  <el-link :underline="false" @click="toUserDetail(item1.userId)">@{{item1.replyCommentUserName}}
                    &nbsp;
                  </el-link>
                  {{item1.content}}
                </div>
                <div style="margin-top: 10px">
                  <el-link :underline="false" icon="iconfont icon-xin" v-if="item1.isUserLike === 0"
                           @click="updateCommentStatus(item1)">&nbsp;{{item1.likeNum}}
                  </el-link>
                  <el-link :underline="false" icon="iconfont icon-xin2" v-else @click="updateCommentStatus(item1)">
                    &nbsp;{{item1.likeNum}}
                  </el-link>
                  <el-link :underline="false" icon="iconfont icon-xiaoxi" style="margin-left: 30px"
                           @click="showCommit(2,index,index1)">&nbsp;
                  </el-link>
                </div>
              </div>
              <!--二级评论控件-->
              <div style="margin-top: 20px;" :style="{'display':item1.isShowComment}">
                <el-input
                  v-model="item1.inputText"
                  maxlength="150"
                  placeholder="请写下你精彩的评论吧"
                  show-word-limit
                  type="textarea"
                />
                <div style="margin-top: 10px;text-align: right">
                  <el-button round size="mini" style="width: 80px;" @click="removeComment(2,index,index1)">取消
                  </el-button>
                  <el-button type="primary" round size="mini" style="width: 80px"
                             @click="commitCommentLevel2(item,item1)">发布
                  </el-button>
                </div>
              </div>
              <el-divider></el-divider>
            </div>
          </div>
        </div>
        <div v-show="commentListV1 == ''" style="width: 100%">
          <div style="text-align: center;color: #969696">
            <span>快来写下你的精彩评论吧</span>
          </div>
        </div>
      </el-card>
    </div>
    <!--评论功能区-->
    <el-card class="commentInput" shadow="always">
      <el-input
        v-model="inputText"
        autosize
        maxlength="150"
        show-word-limit
        type="textarea"
        placeholder="请输入你的精彩评论吧"
        style="width: 700px;border-radius: 30px;margin-right: 30px"
      />
      <el-button type="primary" round size="mini" style="width: 80px" @click="commitComment">发布</el-button>
    </el-card>
  </div>
</template>

<script>
  import header from '../layout/Header.vue'
  import footer from '../layout/Footer.vue'
  import menu from '../layout/Menu.vue'

  export default {
    components: {
      'v-header': header,
      'v-footer': footer,
      'v-menu': menu
    },
    name: "PlayMusicComment",
    data() {
      return {
        musicInfo: {
          authorId: 0
        },
        singerInfo: {
          singerName: '暂无',
          fansCount: '暂无',
          heat: '暂无',
          intro: '暂无'
        },
        userInfo: {
          userId: 0,
          userName: ''
        },
        userId: '',
        inputText: '',
        hash: '',
        albumId: '',
        commentListV1: [],
        commentNum: 0
      }
    },
    created() {
      document.title = '歌曲评论';
      this.hash = this.$route.query.hash;
      this.albumId = this.$route.query.albumId;
    },
    mounted() {
      this.getMusicInfo(this.hash, this.albumId);
      this.getMusicComment(this.hash, this.albumId);
    },
    methods: {
      //跳转用户细节
      toUserDetail(userId) {
        let token = sessionStorage.getItem('token');
        if (token === undefined || token === '' || token === null) {
          this.$message({
            showClose: true,
            message: '您还未登录，请登录后查看',
            type: 'info'
          })
        } else {
          let routeUrl = this.$router.resolve({
            path: '/userDetail',
            query: {
              userId: userId
            }
          });
          window.open(routeUrl.href, '_blank');
        }
      },
      //点赞评论
      updateCommentStatus(item) {
        this.$axios({
          method: 'post',
          url: '/user/commentLikes/' + item.id,
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          if (res.data.msgCode === '200') {
            this.getMusicComment(this.hash, this.albumId);
          }
        })
      },
      //删除评论
      deleteComment(item) {
        this.$axios({
          method: 'post',
          url: '/user/deleteComment/' + item.id,
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          if (res.data.msgCode !== '200') {
            this.$message.error(res.data.msg)
          } else {
            this.$message.success(`删除成功`);
            this.getMusicComment(this.hash, this.albumId);
          }
        })
      },
      //发表评论
      commitComment() {
        if (this.userInfo.userId !== 0) {
          if (this.inputText.split(" ").join("").length === 0) {
            this.$message.info(`不能发表空白评论哦`)
          } else {
            this.$axios({
              method: 'post',
              url: '/user/musicComment',
              headers: {
                authentication: sessionStorage.getItem("token")
              },
              data: {
                content: this.inputText,
                hash: this.hash,
                albumId: this.albumId
              }
            }).then(res => {
              if (res.data.msgCode === '200') {
                this.$message.success(res.data.msg);
                this.inputText = '';
                this.getMusicComment(this.hash, this.albumId);
              } else {
                this.$message.error(res.data.msg);
              }
            })
          }
        } else {
          this.$message.warning(`您还未登陆，请登陆后评论`)
        }
      },
      //评论一级评论
      commitCommentLevel1(item) {
        if (this.userInfo.userId !== 0) {
          if (item.inputText.split(" ").join("").length === 0) {
            this.$message.info(`不能发表空白评论哦`)
          } else {
            this.$axios({
              method: 'post',
              url: '/user/musicCommentLevel1',
              headers: {
                authentication: sessionStorage.getItem("token")
              },
              data: {
                content: item.inputText,
                hash: this.hash,
                albumId: this.albumId,
                parentId: item.id,
                parentUserId: item.userId,
                parentUserName: item.userName,
                replyCommentId: item.id,
                replyCommentUserId: item.userId,
                replyCommentUserName: item.userName
              }
            }).then(res => {
              if (res.data.msgCode === '200') {
                this.$message.success(res.data.msg);
                item.inputText = '';
                this.getMusicComment(this.hash, this.albumId);
              } else {
                this.$message.error(res.data.msg);
              }
            })
          }
        } else {
          this.$message.warning(`您还未登陆，请登陆后评论`)
        }
      },
      //评论二级评论
      commitCommentLevel2(item, item2) {
        if (this.userInfo.userId !== 0) {
          if (item2.inputText.split(" ").join("").length === 0) {
            this.$message.info(`不能发表空白评论哦`)
          } else {
            this.$axios({
              method: 'post',
              url: '/user/musicCommentLevel1',
              headers: {
                authentication: sessionStorage.getItem("token")
              },
              data: {
                content: item2.inputText,
                hash: this.hash,
                albumId: this.albumId,
                parentId: item.id,
                parentUserId: item.userId,
                parentUserName: item.userName,
                replyCommentId: item2.id,
                replyCommentUserId: item2.userId,
                replyCommentUserName: item2.userName
              }
            }).then(res => {
              if (res.data.msgCode === '200') {
                this.$message.success(`评论成功`);
                item2.inputText = '';
                this.getMusicComment(this.hash, this.albumId);
              } else {
                this.$message.error(`评论失败`);
              }
            })
          }
        } else {
          this.$message.warning(`您还未登陆，请登陆后评论`)
        }
      },
      //校验用户是否登录
      verifyUser() {
        this.$axios({
          method: 'post',
          url: '/user/verifyUser',
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          if (res.data.msgCode !== '200') {
            this.$message.warning(`您还未登录，请登录后进行操作`)
          } else {
            this.userInfo.userId = res.data.data.userId;
            this.userInfo.userName = res.data.data.userName;
          }
        })
      },
      //跳转到专辑详情
      toSingerAlbumDetail() {
        let routeUrl = this.$router.resolve({
          path: '/singerAlbumDetail',
          query: {
            albumId: this.albumId
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      //跳转歌手详情页
      toSingerDetail() {
        let routeUrl = this.$router.resolve({
          path: '/singerDetail',
          query: {
            id: this.singerInfo.id
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      //获取歌曲信息
      getMusicInfo(hash, albumId) {
        this.$axios({
          method: 'get',
          url: '/kugou/musicInfo/' + hash + '/' + albumId
        }).then(res => {
          this.musicInfo = res.data.data;
          this.getSingerInfo(res.data.data.authorId);
        })
      },
      //获取歌手信息
      getSingerInfo(singerId) {
        this.$axios({
          method: 'get',
          url: '/kugou/singerInfo/' + singerId
        }).then(res => {
          if (res.data.data !== null) {
            this.singerInfo = res.data.data;
          }
        })
      },
      //获取评论
      getMusicComment(hash, albumId) {
        this.$axios({
          method: 'get',
          url: '/kugou/musicComment/' + hash + '/' + albumId,
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          this.commentListV1 = res.data.data.info;
          this.commentNum = res.data.data.commentNum;
          this.verifyUser();
        })
      },
      //展示评论
      showCommit(level, index, index2) {
        if (level === 1) {
          this.commentListV1[index].isShowComment = 'block'
        } else {
          this.commentListV1[index].userCommentList[index2].isShowComment = 'block'
        }

      },
      //关闭评论
      removeComment(level, index, index2) {
        if (level === 1) {
          this.commentListV1[index].isShowComment = 'none'
        } else {
          this.commentListV1[index].userCommentList[index2].isShowComment = 'none'
        }
      }
    }
  }
</script>

<style scoped>

  /deep/ .el-textarea__inner {
    resize: none;
  }

  .commentInput {
    position: fixed;
    bottom: 0;
    width: 100%;
    border-radius: 15px 15px 0 0;
    text-align: center;
  }

  .musicCommentBody {
    width: 1000px;
    margin: 0 auto;
  }

  .musicInfo {
    border-radius: 15px;
    margin-top: 40px;
  }

  .musicInfo_music {
    padding: 10px;

  }

  .musicInfo_singer {
    padding: 10px;

  }

  .commonCss {
    border-radius: 15px;
  }

  .commentInfo {
    margin-top: 20px;
    height: 100%;
    border-radius: 15px;
    padding-bottom: 60px;
  }

  .musicInfoText {
    margin-top: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .musicTextDiv {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    float: right;
    width: 200px;
    height: 200px;
  }

  div {
    word-wrap: break-word;
    word-break: normal;
  }
</style>
